<template>
  <div>
    <el-form label-position="left" :model="resource" :disabled="readonly">
      <div class="flex">
        <div class="flex flex-grow items-center gap-4">
          <div>
            <el-icon size="32"><Cpu /></el-icon>
          </div>
          <div>
            <el-form-item
              :label="'CPU ' + $t('business.workload.reservation')"
              prop="requests.cpu"
            >
              <ko-data-item
                v-model:model-value="resource.requests.cpu"
                placeholder="e.g. 1000"
                itemType="clearNumber"
                dividerName="mCPUs"
              />
            </el-form-item>
            <el-form-item
              :label="'CPU ' + $t('business.workload.limit')"
              prop="limits.cpu"
            >
              <ko-data-item
                v-model:model-value="resource.limits.cpu"
                placeholder="e.g. 1000"
                itemType="clearNumber"
                dividerName="mCPUs"
              />
            </el-form-item>
          </div>
        </div>

        <div class="flex flex-grow items-center gap-4">
          <div>
            <el-icon size="32"><Odometer /></el-icon>
          </div>
          <div>
            <el-form-item
              :label="
                $t('business.workload.memory') +
                $t('business.workload.reservation')
              "
              prop="requests.memory"
            >
              <ko-data-item
                v-model:model-value="resource.requests.memory"
                placeholder="e.g. 128"
                itemType="clearNumber"
                dividerName="Mi"
              />
            </el-form-item>
            <el-form-item
              :label="
                $t('business.workload.memory') + $t('business.workload.limit')
              "
              prop="limits.memory"
            >
              <ko-data-item
                v-model:model-value="resource.limits.memory"
                placeholder="e.g. 128"
                itemType="clearNumber"
                dividerName="Mi"
              />
            </el-form-item>
          </div>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import KoDataItem from "@/views/domain/kubeHud/views/components/ko-data-item/index.vue";

import { ResourceRequirements } from "../../../api/k8s";
import { ref } from "vue";
// import { cpuUnitConvert, memoryUnitConvert } from "@/utils/unitConvert";
type Prop = {
  readonly?: boolean;
};
const props = withDefaults(defineProps<Prop>(), {
  readonly: false
});

const resource = defineModel<ResourceRequirements>("resource", {
  default: { requests: {}, limits: {} }
});
</script>
